<template>
	<view class="content">

		<!-- 顶部tab栏 -->

		<tabBar :tabBars="tabBars" :tabIndex= 'secindex'  @toIndex='toIndex'></tabBar>

		<!-- index-list 组件 -->
		<view class="uni-tab-bar">
			<swiper :current="secindex" class="swiper-box" :style="{height:swiperHeight+'px'}" @change="changeIndex">
				<swiper-item class="swiper-item" v-for="(items,index1) in newsList" :key="index1">

					<scroll-view class="scroll-v list scroll-Y" enableBackToTop="true" scroll-y @scrolltolower="loadMore(index1)">
						
							<template v-if="items.list.length > 0">
								<block v-for="(item,index) in items.list" :key="index">
									<view class="">
										<index-list :item="item" :index="index" @delItem="delItem(index1,index)"></index-list>
									</view>
								</block>
								<loadMore v-if="items.list.length>2" :loadtext="items.loadtext"></loadMore>
							</template>
						<template v-else>
							<noThing></noThing> 
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	// 引入index-list组件
	import indexList from '../../components/index/index-list.vue';
	import tabBar from '../../components/tabbar/tabbar.vue'
	import loadMore from '../../components/common/load-more.vue'
	import noThing from '../../components/no-thing/no-thing.vue'
	export default {
		components: {
			indexList,
			tabBar,
			loadMore,
			noThing
		},
		data() {
			return {
				secindex:0,
				// tabIndex: this.tabIndex1,
				tabBars: [{
					name: '关注',
					id: 'guanzhu'
				}, {
					name: '推荐',
					id: 'tuijian'
				}, {
					name: '体育',
					id: 'tiyu'
				}, {
					name: '热点',
					id: 'redian'
				}, {
					name: '财经',
					id: 'caijing'
				}, {
					name: '娱乐',
					id: 'yule'
				}, {
					name: '军事',
					id: 'junshi'
				}, {
					name: '历史',
					id: 'lishi'
				}, {
					name: '本地',
					id: 'bendi'
				}, ],
				swiperHeight: 665,

				newsList: [
					{
						loadtext: '上拉加载更多...',
						list: [{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: true,
								title: "动态标题1",
								type: "video", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 2, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题2",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题3",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							}
						]
					},
					{
						loadtext: '上拉加载更多...',
						list: [{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: true,
								title: "动态标题",
								type: "video", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 2, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							}
						]
					},
					{
						loadtext: '上拉加载更多...',
						list: [{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: true,
								title: "动态标题",
								type: "video", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 2, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							}
						]
					},
					{
						loadtext: '上拉加载更多...',
						list: [{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: true,
								title: "动态标题",
								type: "video", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 2, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							}
						]
					},
					{
						loadtext: '上拉加载更多...',
						list: [{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: true,
								title: "动态标题",
								type: "video", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 2, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							}
						]
					},
					{
						loadtext: '上拉加载更多...',
						list: [{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: true,
								title: "动态标题",
								type: "video", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 2, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							}
						]
					},
					{
						loadtext: '上拉加载更多...',
						list: [{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: true,
								title: "动态标题",
								type: "video", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 2, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							}
						]
					},
					{
						loadtext: '上拉加载更多...',
						list: [{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: true,
								title: "动态标题",
								type: "video", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 2, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "撸大师",
								isguanzhu: false,
								title: "动态标题",
								type: "img", //img : 图文   video: 视频
								titlepic: "",
								infonum: {
									index: 0, //0:没有关注  1：赞  2：踩
									dingnum: 11,
									cainum: 2
								},
								commentnum: 10,
								sharenum: 66
							}
						]
					},
					{
						loadtext: '上拉加载更多...',
						list: [
						]
					}
				],

			}
		},
		// 监听原生标题栏搜索输入框点击事件
		onNavigationBarSearchInputClicked(e){
			
			uni.navigateTo({
				url:'../../pages/search/search'
			})
		},
		// 监听原生标题栏按钮单击事件，参数为对象
		onNavigationBarButtonTap(e){
			console.log(JSON.stringify(e.index));
			if(e.index===1){
				uni.navigateTo({
					url:'../add-input/add-input'
				})
			}
		},
		methods: {
			// getTabIndex(data){
			// 	this.tabIndex1 = data

			// },
			delItem(index,data){
				this.newsList[index].list.splice(data,1)
			},
			toIndex(index){
				this.secindex = index
			},
			loadMore(index){
				// let obj = {
				// 			userpic: "../../static/demo/userpic/11.jpg",
				// 			username: "撸大师",
				// 			isguanzhu: true,
				// 			title: "动态标题",
				// 			type: "video", //img : 图文   video: 视频
				// 			titlepic: "",
				// 			infonum: {
				// 				index: 2, //0:没有关注  1：赞  2：踩
				// 				dingnum: 11,
				// 				cainum: 2
				// 			},
				// 			commentnum: 10,
				// 			sharenum: 66
				// 		}
						if(this.newsList[index].loadtext !== '上拉加载更多...'){return ;}
						this.newsList[index].loadtext = '加载中'
						console.log(this.newsList[index].loadtext)
						// this.newsList[index].loadtext = '没有更多'
						setTimeout(() => {
							let obj = {
										userpic: "../../static/demo/userpic/11.jpg",
										username: "撸大师",
										isguanzhu: true,
										title: "动态标题",
										type: "video", //img : 图文   video: 视频
										titlepic: "",
										infonum: {
											index: 2, //0:没有关注  1：赞  2：踩
											dingnum: 11,
											cainum: 2
										},
										commentnum: 10,
										sharenum: 66
									}
							this.newsList[index].list.push(obj)
							this.newsList[index].loadtext = '上拉加载更多...'
						}, 1000);
			},
			changeIndex(e) {
				this.secindex  =  e.mp.detail.current
			}
		},
		computed: {
			getIndex() {
				return this.$store.getters.getTabIndex
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowHeight - uni.upx2px(90);
					// console.log(res.windowHeight)
					// console.log(res.screenHeight)
					// console.log(res.statusBarHeight)
				}
			})
		}
	}
</script>

<style>
	
	.content {
		width: 100%;
	}

	.swiper-box {
		/* margin-top: 80upx; */
	}

	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	/* #endif */

	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.scroll-h {
		width: 750upx;
		height: 80upx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}

	.line-h {
		height: 1upx;
		background-color: #cccccc;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34upx;
		padding-right: 34upx;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 30upx;
		height: 80upx;
		line-height: 80upx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007AFF;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		flex: 1;
		flex-direction: row;
	}

	.scroll-v {
		flex: 1;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750upx;
	}
</style>
